import { Form, Input, Row, Col, Radio, Select, Spin } from 'antd';
import React from 'react';
import { useRequest } from '@umijs/hooks';
import { getSelectCityInfo } from '../../service';

export default function Step1({ data = {}, isEdit = false, form }) {
  const { getFieldDecorator } = form;
  const { data: options = [], loading: optionsLoading } = useRequest(getSelectCityInfo);

  return (
    <Row>
      <Col span={12}>
        <Form.Item label="工号">
          {getFieldDecorator('userId', {
            initialValue: data.userId,
            rules: [{ required: true, message: '请输入工号' }],
          })(<Input size="large" placeholder="请输入工号" disabled={isEdit} allowClear />)}
        </Form.Item>
        <Form.Item label="用户姓名">
          {getFieldDecorator('tuCname', {
            initialValue: data.tuCname,
            rules: [{ required: true, message: '请输入用户姓名' }],
          })(<Input size="large" placeholder="请输入用户姓名" disabled={isEdit} allowClear />)}
        </Form.Item>
        <Form.Item label="联系电话">
          {getFieldDecorator('tuMobile', {
            initialValue: data.tuMobile,
            rules: [{ required: true, message: '请输入联系电话' }],
          })(<Input size="large" placeholder="请输入联系电话" disabled={isEdit} allowClear />)}
        </Form.Item>
        <Form.Item label="邮箱地址">
          {getFieldDecorator('tuEmail', {
            initialValue: data.tuEmail,
            rules: [{ required: true, message: '请输入邮箱地址' }],
          })(<Input size="large" placeholder="请输入邮箱地址" disabled={isEdit} allowClear />)}
        </Form.Item>
        <Form.Item label="所属部门">
          {getFieldDecorator('deptName', {
            initialValue: data.deptName,
            rules: [{ required: true, message: '请输入所属部门' }],
          })(<Input size="large" placeholder="请输入所属部门" disabled={isEdit} allowClear />)}
        </Form.Item>
      </Col>
      <Col span={12}>
        <Form.Item label="出生日期">
          {getFieldDecorator('tuBdate', {
            initialValue: data.tuBdate,
            rules: [{ required: true, message: '请输入出生日期' }],
          })(<Input size="large" placeholder="请输入出生日期" disabled={isEdit} allowClear />)}
        </Form.Item>
        <Form.Item label="用户状态">
          {getFieldDecorator('userState', {
            initialValue: data.userState === '启用' ? '0' : '1',
            rules: [{ required: true, message: '请选择出生日期' }],
          })(
            <Radio.Group>
              <Radio value="0">启用</Radio>
              <Radio value="1">禁用</Radio>
            </Radio.Group>,
          )}
        </Form.Item>
        <Spin spinning={optionsLoading} style={{ minHeight: 30 }}>
          <Form.Item label="工作航站">
            {getFieldDecorator('airportCode', {
              initialValue: (data.airportCode || data.airport || '').slice(0, 3),
              rules: [{ message: '请选择工作航站' }],
            })(
              <Select placeholder="请选择工作航站" 
                notFoundContent={null}
                showSearch
                filterOption={true}
                defaultActiveFirstOption={false}
                showArrow={false}
                optionFilterProp="children"
                allowClear>
                {options.map(({ CITY3CODE, CITYNAME }) => (
                  <Select.Option key={CITY3CODE} >
                   {CITYNAME}-{CITY3CODE}
                  </Select.Option>
                ))}
              </Select>,
            )}
          </Form.Item>
        </Spin>
      </Col>
    </Row>
  );
}
